<template>
    <div>

    </div>
</template>

<script>
import { reactive,ref } from 'vue'
import type { FormInstance,FormRules } from 'element-plus'
const userLogin = reactive({
    username: 'aa',
    password: 'bb'
})
const loginFormRef=ref<FormInstance>()
const validateUsername=(rule:any,value:string,callback:any)=> {
    if(validateUsername.includes('z')){
        callback(new Error('账号不合法'))
    }else{
        callback() 
    }
}
const rules = reactive<FormRules<typeof userLogin>>({
    username:[
        {
            required:true,
            whitespace:true,
            message:'账号不能为空'
        },{
            validator:validateUsername
        }
    ],
    password:[
        {
            required:true,
            whitespace:true,
            message:'密码不能为空'
        }
    ]
})
const submitForm = () => {
    if(!loginFormRef.value)return
    loginFormRef.value.validate( (valid:boolean)=> {
        if(valid){
            console.log(111);
        }
    })
}
</script>

<style lang="sass" scoped>

</style>